<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }

        ul {
            list-style: none;
            margin-right: 18px;
            height: 300px;
        }

        li {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            cursor: grab;
        }

        .active-class {
            border: 1px solid black;
            background: #eee;
        }
    </style>
</head>

<body>
    <script>
        window.onload = function () {
            const container = document.querySelector('.container')
            let source = null
            container.ondragstart = function (e) {
                e.dataTransfer.effectAllowed = e.target.dataset.effect
                source = e.target
            }
            container.ondragover = function (e) {
                e.preventDefault()
            }
            container.ondragenter = function (e) {
                clearActiveClass()
                const dropNode = getDropNode(e.target)
                if (e.dataTransfer.effectAllowed === dropNode.dataset.drop) {
                    dropNode.classList.add('active-class')
                }
            }
            container.ondrop = function (e) {
                clearActiveClass()
                const dropNode = getDropNode(e.target)
                if (!dropNode) {
                    return
                }
                if (e.dataTransfer.effectAllowed !== dropNode.dataset.drop) {
                    return
                }
                if (dropNode.dataset.drop === 'copy') {
                    const newNode = source.cloneNode(true)
                    newNode.dataset.effect = 'move'
                    dropNode.innerHTML = ''
                    dropNode.append(newNode)
                } else {
                    source.remove()
                }
            }
            function clearActiveClass() {
                const activeEle = document.querySelectorAll('.active-class')
                activeEle.forEach(item => {
                    item.classList.remove('active-class')
                })
            }
            function getDropNode(node) {
                while (node) {
                    if (node.dataset && node.dataset.drop) {
                        return node
                    }
                    node = node.parentNode
                }
            }
        }
    </script>
    <div class="container">
        <ul data-drop="move">
            <li data-effect="copy" draggable="true" style="background: skyblue;">语文</li>
            <li data-effect="copy" draggable="true" style="background: pink;">英语</li>
            <li data-effect="copy" draggable="true" style="background: palegreen;">数学</li>
            <li data-effect="copy" draggable="true" style="background: palevioletred;">体育</li>
            <li data-effect="copy" draggable="true" style="background: powderblue;">化学</li>
            <li data-effect="copy" draggable="true" style="background: plum;">物理</li>
        </ul>
        <table border width="600" height="100" class="table">
            <thead>
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                    <td data-drop="copy"></td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
<script>

</script>

</html>